<template>
	<div class="img-X">
		<ol>
			<li class="list-item" v-for="(item,index) in Playlist" :key="index">
				<img :src="item.img" />
				<div class="list_lii">
					<p class="X-tit">{{item.til}}</p>
					<div class="X-small">
						<span>已售{{item.sold}}件</span>
						<label>{{item.price}}<b>元起</b></label>
					</div>
				</div>
			</li>
		</ol>
	</div>
</template>

<script>
	export default {
		props:['Playlist'],//接收父组件传递的数组
		data() {
			return {
				
			}
		}
	}
</script>

<style scoped>
	.img-X {
		width: 100%;
		overflow: hidden;
		background-color: white;
		display: flex;
	}
	.img-X ul{
		width: 100%;
	}
	.list-item{
		width: 100%;
		height: 2rem;
		padding: 0.2rem;
		/* float: left; */
		overflow: hidden;
		display: flex;
	}
	.list-item li{
		/* border-bottom: 0.1rem solid #CCCCCC; */
		position: relative;
	}
	.list-item img{
		width: 2rem;
		height: 2rem;
		display: inline-block;
		border-radius: 0.1rem;
	}
	.list_lii{
		display: inline-block;
		padding-left: 0.2rem;
		line-height: 0.6rem;
		flex: 1;
		margin-right: 0.2rem;
	}
	.list_lii p{
		color: #212121;
		font-size: 0.3rem;
		font-weight: bold;
		text-overflow: ellipsis;
	}
	.list_lii b{
		color: #CCCCCC;
		padding-right: 0.2rem;
		font-size: 0.32rem;
	}
	.list_lii span{
		font-size: 0.32rem;
	}
	.X-small span{
		color: #CCCCCC;
		font-size: 0.28rem;
		padding-bottom: 2rem;
	}
	.X-small label{
		font-size: 0.32rem;
		float: right;
		padding-right: 0.25rem;
		color: orangered;
		margin-top: 0.2rem;
	}
</style>
